<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="/static/plugins/Buttons-1.4.0/css/buttons.bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="/static/plugins/bootstrapvalidator/dist/css/bootstrapValidator.min.css" />
		<style type="text/css">
			.insert {
				width: 100%;
				min-height: 300px;
				margin: 0 auto;
				text-align: center;
				padding-top: 10px;
				padding-bottom: 10px;
				border-radius: 10px;
				text-align: center;
				background-color: #ECF0F5;
			}
			
			.modal-content {
				border-radius: 20px;
			}
			
			.title {
				font-size: 24px;
				font-weight: bold;
				line-height: 40px;
				margin-bottom: 20px;
			}
			
			.main {
				width: 280px;
				margin: 0 auto;
				text-align: left;
			}
			
			.black {
				font-size: 25px;
				float: right;
			}
			
			.marginLeft {
				margin-left: 30px;
			}
			
			.error1,
			.error2,
			.error3,
			.error4,
			.error5,
			.error6 {
				display: none;
				color:#DD4B39;
				font-size: 12px;
			}
			
			.inputTitle {
				display: inline-block;
				width: 100px;
				text-align: right;
			}
			
			.main input {
				width: 160px;
			}
			
			.main .Sex1,
			.main .Sex2 {
				width: 30px;
			}
			
			#roleinput {
				width: 80px;
				height: 33px;
			}
			
			.form-control {
				display: inline-block;
			}
		</style>
	</head>

	<body>
		<div class="insert">
			<div class="title">
				新增用户
			</div>
			<div class="main">
				<form id="insertForm" action="user/add" method="post">
					<p><span class="inputTille">用户权限：</span>
						<select name="roleid" id="roleinput">
						</select>
					</p>
					<div class="form-group">
						<p>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：<input class="form-control username2" type="text" name="username" /></p>
					</div>
					<div class="form-group">
						<p>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：<input type="radio" name="Sex" class="Sex1" value="男" checked="checked" />男 <input type="radio" name="Sex" id="" value="女" class="Sex2" />女</p>
					</div>
					<div class="form-group">
						<p>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱：<input class="form-control email" type="text" name="email" /></p>
						<p class="error1"></p>
					</div>
					<div class="form-group">
						<p>初始密码：<input class="form-control pas" type="password" name="password" /></p>
					</div>
					<div class="form-group">
						<p>手机号码：<input class="form-control phone" type="text" name="phone" /></p>
					</div>

					<div class="form-group">
						<button type="button" class="btn btn-primary marginLeft">取消</button>
						<button type="submit" class="btn btn-primary submit marginLeft">提交</button>
						<button type="button" class="btn btn-primary marginLeft" data-dismiss="modal">返回</button>
					</div>
				</form>
			</div>
		</div>
		<script src="/static/plugins/Buttons-1.4.0/js/buttons.bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/plugins/bootstrapvalidator/dist/js/bootstrapValidator.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				var tables = $('#table_id_example').DataTable();
				$.ajax({
					url: "/get/Role",
					type: "post",
					success: function(data) {
						var result = $.parseJSON(data);
						//						console.log(result[0]['ID']); 
						for(var i = 0; i < result.length; i++) {
							var opt = $("<option>" + result[i]['ID'] + "<option>");
							$(opt).attr("value", result[i]['ID']);
							$("#roleinput").append(opt);
						}
					}
				});
				var isgo;
				$(document).ready(function() {
					$("#insertForm").bootstrapValidator({
							fields: {
								username: {
									validators: {
										notEmpty: {
											message: '姓名不能为空'
										}
									}
								},
								password: {
									validators: {
										notEmpty: {
											message: '密码不能为空'
										},
										stringLength: {
											min: 6,
											max: 12,
											message: "请输入长度不少于6位的密码！"
										}

									}
								},
								email: {
									validators: {
										notEmpty: {
											message: '邮箱不能为空'
										},
										emailAddress: {
											message: '请输入有效的邮箱地址'
										}
									}
								}
							}
						})
						.on('success.form.bv', function(e) {
							e.preventDefault();
							var roleid = $("#roleinput").val();
							var username = $(".username2").val();
							var sex = $(".Sex1")[0].checked ? 1 : 0;
							var xing = "";
							if(sex == 1) {
								xing = "男";
							} else {
								xing = "女";
							}
							var email = $(".email").val();
							var pas = $(".pas").val();
							var phone = $(".phone").val();
							$.ajax({
								type: "post",
								url: "/getEmail",
								data: {
									email: email
								},
								success: function(data) {
									if(data['code'] == 0) {
										isgo = false;
										$(".error1").css("display", "block");
										$(".error1").html("邮箱已经被占用");
									} else {
										$(".error1").css("display", "none");
										$.ajax({
											type: "post",
											url: "/user/add",
											data: {
												roleid: roleid,
												username: username,
												sex: xing,
												pas: pas,
												email: email,
												phone: phone
											},
											success: function(data) {
												if(data.code == 0) {
													alert("添加成功！");
													tables.draw(false);
												} else {
													alert("添加失败！");
												}
											}
										});
									}
								}
							})

							return false;
						});
				});
			})
		</script>
	</body>

</html>